<template>
    <div class="carlist_wrap">
        <el-row style="padding: 20px 0;">
            <el-col :span="2">
                品牌和车系：
            </el-col>
            <el-col :span="22">
                <div v-if="allbs != null">
                    <el-tabs v-model="tabActiveName" type="border-card">
                        <el-tab-pane v-for="(o, zimu) in allbs" :key="zimu" :label="zimu" :name="zimu">
                            <!-- 选项卡面板 -->
                            <span class="option_span" :class="{ active: brand == '' }" @click="buxianBrand">
                                不限
                            </span>
                            <!-- 循环品牌 -->
                            <span v-for="(seriesArr, brandName) in o" :key="brandName" class="option_span"
                                :class="{ active: brand == brandName }" @click="clickBrand(brandName, seriesArr, zimu)">
                                {{ brandName }}
                            </span>


                            <!-- 车系 -->
                            <div style="background-color:aliceblue; margin-top: 20px; padding-left: 20px;"
                                v-if="zimu == brandShouZimu && brand != ''">
                                <RCBar v-if="seriesRcbarVIF" v-model="series" fname="车系" :options="seriesInBrand">
                                </RCBar>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>

        <RCBar v-model="color" fname="颜色" :options="['红', '黄', '黑', '白', '灰', '绿', '蓝']"></RCBar>

        <RCBar v-model="exhaust" fname="排放标准" :options="['国一', '国二', '国三', '国四', '国五']"></RCBar>

        <RCBar v-model="engine" fname="排量"
            :options="['1.2L', '1.4L', '1.6L', '1.6T', '1.8L', '1.8T', '2.0L', '2.0T', '3.0L', '3.0T']"></RCBar>

        <RCBar v-model="gearbox" fname="变速箱类型" :options="['手动', '自动']"></RCBar>

        <RCBar v-model="fuel" fname="燃料" :options="['油电混合', '纯电动', '柴油', '汽油']"></RCBar>

        <el-row style="padding: 10px 0;" :gutter="20">
            <el-col :span="2">
                价格范围：
            </el-col>
            <el-col :span="10">
                <el-slider v-model="price" range @change="changePrice($event)" :min="0" :max="105"></el-slider>
            </el-col>
            <el-col :span="5">
                <div style="display: flex; align-items: center;">
                    <el-input v-model="price_a"></el-input>
                    <span style="margin: 0 10px;"> ~ </span>
                    <el-input v-model="price_b"></el-input>

                    <el-button style="margin-left: 10px;" @click="priceOK">确定</el-button>
                </div>
            </el-col>
        </el-row>


        <el-row style="padding: 10px 0;" :gutter="20">
            <el-col :span="2">
                公里数：
            </el-col>
            <el-col :span="10">
                <el-slider v-model="km" range @change="changeKM($event)" :min="0" :max="200"></el-slider>
            </el-col>
            <el-col :span="5">
                <div style="display: flex; align-items: center;">
                    <el-input v-model="km_a"></el-input>
                    <span style="margin: 0 10px;"> ~ </span>
                    <el-input v-model="km_b"></el-input>

                    <el-button style="margin-left: 10px;" @click="kmOK">确定</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row style="padding: 20px 0;">
            <el-col>
                <el-tag :closable="true" v-if="brand != ''" @close="brand = ''">
                    品牌：{{ brand }}
                </el-tag>

                <el-tag :closable="true" v-if="series.length != 0" @close="series = []">
                    车系：{{ series.join('、') }}
                </el-tag>

                <el-tag :closable="true" v-if="color.length != 0" @close="color = []">
                    颜色：{{ color.join('、') }}
                </el-tag>

                <el-tag :closable="true" v-if="exhaust.length != 0" @close="exhaust = []">
                    排放标准：{{ exhaust.join('、') }}
                </el-tag>

                <el-tag :closable="true" v-if="engine.length != 0" @close="engine = []">
                    排量：{{ engine.join('、') }}
                </el-tag>

                <el-tag :closable="true" v-if="gearbox.length != 0" @close="gearbox = []">
                    变速箱类型：{{ gearbox.join('、') }}
                </el-tag>

                <el-tag :closable="true" v-if="fuel.length != 0" @close="fuel = []">
                    燃料：{{ fuel.join('、') }}
                </el-tag>

                <el-tag :closable="true" v-if="price[0] != 0 || price[1] != 105"
                    @close="price = [0, 105]; price_a = 0; price_b = 200">
                    价格范围：{{ price.join('到') }}万元
                </el-tag>

                <el-tag :closable="true" v-if="km[0] != 0 || km[1] != 200" @close="km = [0, 200]; km_a = 0; km_b = 200">
                    公里数：{{ km.join('到') }}万公里
                </el-tag>
            </el-col>
        </el-row>


        <!-- 分页条 -->
        <el-pagination background :total="total" :current-page="page" :page-size="pagesize"
            @current-change="changePage"></el-pagination>


        <!-- 表格 -->
        <el-table :data="tableData" v-loading="loading" @sort-change="sortChange">
            <el-table-column label="照片" :width="180">
                <template slot-scope="scope">
                    <img :src="`http://www.zkt-it.com:5050/images/carimages_small/${scope.row.id}/view/${scope.row.img}`"
                        alt="">
                </template>
            </el-table-column>
            <el-table-column prop="id" label="id" sortable="custom"></el-table-column>
            <el-table-column prop="brand" label="品牌"></el-table-column>
            <el-table-column prop="series" label="车系"></el-table-column>
            <el-table-column prop="color" label="颜色"></el-table-column>
            <el-table-column prop="price" label="价格" sortable="custom"></el-table-column>
            <el-table-column prop="km" label="公里数" sortable="custom"></el-table-column>
            <el-table-column prop="engine" label="排量"></el-table-column>
            <el-table-column label="购车日期" sortable="custom">
                <template slot-scope="scope">
                    {{ moment(scope.row.buydate).format('YYYY年MM月DD日') }}
                </template>
            </el-table-column>
            <el-table-column prop="exhaust" label="排放标准"></el-table-column>
            <el-table-column prop="gearbox" label="变速箱类型"></el-table-column>
            <el-table-column prop="fuel" label="燃料"></el-table-column>
        </el-table>
    </div>
</template>

<script>
import { fetchCar, fetchAllBS } from "@/api/car";
import moment from 'moment';

export default {
    // activated() {
    //     alert('我激活了')
    // },
    // deactivated() {
    //     alert('我不激活了')
    // },
    created() {
        alert('created')
        fetchAllBS().then(data => {
            this.allbs = data;
        });

        this.loadData();
    },
    data() {
        return {
            page: 1,
            pagesize: 10,
            tableData: [],
            total: 0,
            loading: false,
            // 排序
            sortby: 'id',
            sortdirection: 1,
            color: [],
            exhaust: [],
            engine: [],
            gearbox: [],
            fuel: [],
            series: [],
            price: [0, 105],
            km: [0, 200],
            // 解决价格范围输入框的双向绑定
            price_a: 0,
            price_b: 105,
            // 解决公里数范围输入框的双向绑定
            km_a: 0,
            km_b: 200,
            // tab栏激活的选项卡
            tabActiveName: 'A',
            // 所有品牌和车系
            allbs: null,
            // 当前正在筛选的品牌
            brand: '',
            // 当前正在筛选的品牌的首字母
            brandShouZimu: '',
            // 当前正在筛选的品牌下的所有车系
            seriesInBrand: [],
            // 车系rcbar是否存在，这个值目的是用于销毁重建
            seriesRcbarVIF: true
        }
    },
    methods: {
        moment,
        // 换页
        changePage(page) {
            this.page = page;
            this.loadData();
        },
        // 请求数据
        async loadData() {
            // 显示loading图
            this.loading = true;

            // Ajax
            const res = await fetchCar({
                page: this.page,
                pagesize: this.pagesize,
                color: this.color.join('v'),
                exhaust: this.exhaust.join('v'),
                engine: this.engine.join('v'),
                gearbox: this.gearbox.join('v'),
                fuel: this.fuel.join('v'),
                series: this.series.join('v'),
                brand: this.brand,
                price: this.price.join('to'),
                km: this.km.map(item => item * 10000).join('to'),
                sortby: this.sortby,
                sortdirection: this.sortdirection
            });

            // 设置data
            this.tableData = res.results;
            this.total = res.total;

            // 取消loading图
            this.loading = false;
        },
        // 点击汽车品牌
        clickBrand(brandName, seriesArr, zimu) {
            this.brand = brandName;
            this.seriesInBrand = seriesArr;
            this.brandShouZimu = zimu;
            // 更改汽车品牌的时候，车系就要为空
            this.series = []

            // 下面的语句工作中很实用、常用，强行让一个组件销毁重建。
            this.seriesRcbarVIF = false;
            this.$nextTick(() => {
                // 下一刻做的事情。立即销毁，下一刻重建。
                this.seriesRcbarVIF = true;
            });
        },
        // 不限汽车品牌
        buxianBrand() {
            this.brand = '';
            // 让车系为空，此时Ajax就发出了，因为series被watch了。
            this.series = [];
        },
        // 改变price拖拽条
        changePrice(v) {
            // 页码归1
            this.page = 1;
            // 拉取
            this.loadData();
            // 同步a、b
            this.price_a = v[0];
            this.price_b = v[1];
        },
        // 改变km拖拽条
        changeKM(v) {
            // 页码归1
            this.page = 1;
            // 拉取
            this.loadData();
            // 同步a、b
            this.km_a = v[0];
            this.km_b = v[1];
        },
        priceOK() {
            // 价格
            this.price = [this.price_a, this.price_b];
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        kmOK() {
            // km
            this.km = [this.km_a, this.km_b];
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        // 排序改变
        sortChange({ column, prop, order }) {
            // prop表示按谁排序，就是服务器要的sortby参数
            // order表示排序顺序，descending就是服务器要的-1
            // order表示排序顺序，ascending就是服务器要的1

            this.sortby = prop;
            this.sortdirection = order == 'descending' ? -1 : 1;

            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        }
    },
    watch: {
        // 只要当前筛选的颜色变化了，就执行这个函数
        color() {
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        exhaust() {
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        engine() {
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        gearbox() {
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        fuel() {
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        },
        series() {
            // 页码归1
            this.page = 1;
            // 重拉
            this.loadData();
        }
    }
}
</script>

<style lang="less">
.carlist_wrap {
    .el-tag {
        margin-right: 10px;
    }

    .option_span {
        display: inline-block;
        text-align: center;
        color: rgb(87, 126, 224);
        padding: 4px 12px;
        margin-right: 20px;
        cursor: pointer;
        border: 1px dotted transparent;
        border-radius: 4px;

        &.bd {
            border: 1px dotted rgb(186, 186, 186);
        }

        &:hover {
            color: orange;
        }

        &.active {

            color: white;
            background: #40a9fd;
        }
    }
}
</style>